<template>
	<!--用户端  自提订单详情 -->
	<view>
		<view class="head_1 bg-white flex-cb">
			<view class="head_div">
				<view class="address">{{merchants.shop_province+merchants.shop_city+merchants.shop_district+merchants.shop_address}}</view>
				<view class="name_people flex-cb">
					<view class="left">
						<view class="people">供货人</view>
						<text class="name_phone">{{merchants.contact_person}}</text>
					</view>
					<view class="right" @click="$utils.callphone(merchants.contact_phone)">
						<view class="people">联系方式</view>
						<text class="name_phone">{{merchants.contact_phone}}</text>
					</view>
				</view>
			</view>
			<map  :latitude="merchants.lat" :longitude="merchants.lng" :markers="covers" @click="handlemap"></map>
		</view>
		<view class="main">
			<view v-for="(item,index) in goods.goods" :key="index" class="item flex">
				<image :src="url+item.main_image" mode=""></image>
				<view class="text_div">
					<view class="name flex-cb ">
						<text class="text">{{item.title}}</text>
						<text class="tuikuan" v-if="index == isshow">
						{{goods.status==0?'待支付':goods.status==1?'已支付':goods.status==2?'配送中':goods.status==3?'已完成(待评价)'
						:goods.status==4?'退款中':goods.status==5?'退款完成':goods.status==6?'已支付':goods.status==7?'已评价':goods.status==-1?'已取消':'拒绝退款'}}</text>
					</view>
					<view class="pic flex justify-between">
						<text class="">原价:￥{{item.price}}</text>
						<text class="jifen" >积分最多抵扣￥{{item.point_price||0}}</text>
					</view>
					<view class="numbar flex-cb">
						<text class="num_x">X{{item.number}}</text>
						<text>会员价:￥{{item.vip_price}}</text>
					</view>
				</view>
			</view>
			<view class="solid"></view>
			<view class="span flex justify-between">
				<view class="">
					<view class="text_span " v-if="goods.discount_method == 1">积分抵扣：￥{{goods.amount-goods.point_amount||0}}</view>
					<view class="text_span">商品数量：{{num}}</view>
					<view class="text_span">总价：￥{{goods.discount_method==0?goods.amount:goods.discount_method==1?goods.point_amount:goods.vip_amount}}</view>
				</view>
				<!-- <view class="image flex-c"> -->
					<!-- <ayQrcode ref="qrcode3"  :modal="modal_qr" qrcode_id="qrcode3" :url="codeurl" @hideQrcode="hideQrcode" :height="100" :width="100" /> -->
				<!-- </view> -->
			</view>
		</view>
		<view class="type bg-white" v-if="service">
			<text>服务项目</text>
			<view class="type_list flex flex-wrap">
				<!-- :class="{item:index == istype}" -->
				<view v-for="(item,index) in service.items" :key="index" class="flex-c"  @click="istype =index">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="foot">
			<view class="ddxx">订单信息</view>
			<view class="solid"></view>
			<view class="span_div flex-cb">
				<view class="left">
					<view>订单编号</view>
					<view>下单时间</view>
					<view v-if="goods.pay_time">支付时间</view>
					<view v-if="goods.write_off_time">自提时间</view>
				</view>
				<view class="right">
					<view>{{goods.order_no}}</view>
					<view>{{goods.created_at}}</view>
					<view v-if="goods.pay_time">{{goods.pay_time}}</view>
					<view v-if="goods.write_off_time">{{goods.write_off_time}}</view>
				</view>
			</view>
		</view>
		<!-- <view class="div">
			<view class="foot foot2" v-if="goods.status ==4||goods.status==5||goods.status ==-2">
				<view class="ddxx">退款信息</view>
				<view class="solid"></view>
				<view class="span_div flex-cb">
					<view class="left">
						<view>退款金额</view>
						<view>退款时间</view>
						<view>退款类型</view>
						<view>{{goods.refund.status == 0?'退款':'拒绝'}}原因</view>
						<view v-if="goods.refund">退款截图</view>
					</view>
					<view class="right">
						<view>￥{{goods.refund.refund_amount}}</view>
						<view>{{goods.refund.created_at}}</view>
						<view >{{goods.refund.refund_type_id==3?'协商退款':'部分退款'}}</view>
						<view>{{goods.refund.status == 0?goods.refund.refund_instruction:goods.refund.reject_reason}}</view>
						<view v-if="goods.refund" class="cuIcon-right" @click="$utils.lookimg(url+goods.refund.image)"></view>
					</view>
				</view>
			</view>
		</view> -->
		<scroll-view scroll-x="true" class="bottom bg-white" enable-flex v-if="goods.status !== -1">
			<view class="flex  align-center justify-end" :style="{paddingBottom:iphone/2 + 'rpx'}">
				<view class="button" @click="concat">联系商家</view>
				<view class="button"  @click="handleQx" v-if="goods.status == 0">取消订单</view>
				<view  class="button button1" v-if="goods.status == 0" @click="qery(goods_id)">立即付款</view> 
				<view class="button button2" v-if="goods.status == 1||goods.status == 6" @click="tk">直接退款</view>
				<!-- <navigator :url="'./refund/refund?tuikuan=1&zt=1&id='+goods_id" class="button" v-if="goods.status == 1||goods.status == 6||goods.status == 5">申请退款</navigator> -->
				<view  class="button button1" v-if="goods.status == 3" @click="evaluate">去评价</view>
				<view class="button button1" @click="handleZT" v-if="goods.status == 1 ||goods.status ==6">自提</view>
			</view>
		</scroll-view>
		<view class="ercode flex-c flex-wrap" v-if="iscode" @click="iscode = 0">
			<view class="code_div flex-c bg-white">
				<view class="||0image flex-c">
				    <ayQrcode ref="qrcode4" :modal="modal_qr" qrcode_id="qrcode4" :url="codeurl" @hideQrcode="hideQrcode" :height="130" :width="130" />
				</view>
				<view class="text">扫描二维码自提商品</view>
				<view class="cuIcon-roundclose" @click="handleZT"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue"
	export default {
		components: {
			ayQrcode,
		},
		data() {
			return {
				im_id:null,
				url:'',
				codeurl:'https://guizhouchenxun.com/mini/write/?indexs=1&id=',
				iphone:'',//是否特定苹果手机
				modal_qr: false,
				index:0,
				isshow:0,
				iscode:0,
				num:0,
				goods_id:null,
				goods:{},
				merchants:{},//商家信息
				service:'',//服务信息
				
				
				
				id:0, // 使用 marker点击事件 需要填写id
				title: 'map',
				covers: [
					{
						latitude: 39.909,
						longitude: 116.39742,
					}, 
				]
			};
		},
		onLoad(e) {
			// this.$refs.qrcode3.crtQrCode()
			
			this.url = this.$base
			this.service = JSON.parse(e.sv)
			this.goods_id = e.id
			this.iphone = getApp().globalData.iphone
			console.log(e);
			this.getgoods(this.goods_id)
			
			
		},
		methods:{
			concat(){
				uni.navigateTo({
					url: `../../pages/TUI-Chat/chat?conversationID=C2C${this.im_id}`
				});
			},
			getgoods(id){
				this.$api.self_pick_list_details({},id,1).then(res=>{
					console.log(res);
					this.goods = res.data
					this.im_id = res.data.uid
					this.codeurl += res.data.id
					for (let i = 0; i < res.data.goods.length; i++) {
						this.num += this.goods.goods[i].number
					}
					this.$api.get_merchants({},this.goods.mch_id,1).then(res=>{
						console.log(res);
						this.merchants = res.data
						this.covers[0].latitude = res.data.lat
						this.covers[0].longitude = res.data.lng
						
					})
				})
			},
			handleZT(){
				this.iscode = !this.iscode
				let _this = this
				_this.modal_qr = true
				setTimeout(()=>{
					_this.$refs.qrcode4.crtQrCode()
				}, 50)
				
			},
			tk(){//直接退款
				let _this = this
				uni.showModal({
					title:'直接退款',
					content:'是否直接退款',
					success(res) {
						if(res.confirm){
							_this.$api.direct_refund({},_this.goods_id,1).then(res=>{
								if(res.code == 200001){
									_this.getgoods(this.goods_id)
								}
							})
						}
					}
				})
			},
			evaluate(){//评价
				uni.navigateTo({
					url:"./refund/refund?tuikuan=0&zt=1"+'&id='+this.goods_id
				})
			},
			handleQx(){
				this.$api.self_pick_cancel({},this.goods.id,1).then(res=>{
					if(res.code == 200001){
						uni.navigateBack({
							delta: 1,
							animationDuration: 500
						})
					}
				})
			},
				handlemap(){//导航
					console.log(11);
					const that = this
					uni.getLocation({
						type: 'gcj02', //返回可以用于uni.openLocation的经纬度
						success: function (res) {
							console.log(res);
							uni.openLocation({
								latitude: parseFloat(that.merchants.lat),//维度
								longitude: parseFloat(that.merchants.lng),//经度
								scale: 18,//缩放比例，范围5~18，默认为18
								name:that.merchants.shop_province+that.merchants.shop_city+that.merchants.shop_district,//地址名称
								address:that.merchants.shop_address+that.merchants.shop_name,//地址详情
								success(res) {
									console.log(res);
								},
								fail(err) {
									console.log(err);
								}
							})
						},
						fail(err) {
							console.log(err);
						}
					});
					
				},
			qery(id){
				this.$api.merchant_pay({},id,1).then(res=>{
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: res.data.signType,
						paySign: res.data.paySign,
						// orderInfo:res.data.prepay_id,
						 success:(r)=>{  
							 console.log(r,3);
							 this.$api.merchant_pay_notify({},id,1).then(res=>{
							 	console.log(res,'4');
							 	 if(res.code == 200001){
									 uni.showToast({
									 	title:"支付成功",icon:"none"
									 })
							 		 this.getgoods(id)
							 	 }
							 })
						 }, 
						 fail(err) {
						 	console.log(err);
						 }
					})
				})
			}
		}
	}
</script>

<style lang="scss">
.head_1{
	width: 706rpx;
	height: 236rpx;
	border-radius: 20rpx;
	margin: 10rpx auto;
	padding: 30rpx 20rpx 0 20rpx;
	.head_div{
		height: 100%;
		.name_people{
			height: 84rpx;
			margin-top: 17rpx;
			.left{
				width: 220rpx;
				border-right: solid 1rpx #999;
			}
			.right{
				margin-left: 28rpx;
			}
			.people{
				font-size: 24rpx;
				color: #999;
				height: 33rpx;
			}
			.name_phone{
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
				height: 42rpx;
			}
		}
	}
	.address{
		width: 442rpx;
		height: 88rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 48rpx;
	}
	map{
		width: 172rpx;
		height: 172rpx;
		border-radius: 10rpx;
	}
}
.main{
	width: 706rpx;
	height: auto;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 26rpx 0;
	margin: auto;
	.item{
		margin-bottom: 61rpx;
		padding: 0 20rpx 0 27rpx;
		image{
			width: 136rpx;
			height: 136rpx;
		}
		.text_div{
			flex: 1;
			margin-left: 19rpx;
			font-size: 28rpx;
			color: #333333;
			.name{
				height: 40rpx;
				.text{
					height: 40rpx;
					font-weight: bold;
				}
				.tuikuan{
					font-size: 30rpx;
					font-weight: 500;
					color: #1CD699;
				}
			}
			.pic{
				height: 40rpx;
				margin-top: 20rpx;
				.jifen{
					color: #FF6F10;
					font-size: 24rpx;
				}
			}
			.numbar{
				text{
					height: 33rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FF2E2E;
				}
				.num_x{
					font-size: 30rpx;
					font-weight: 500;
					color: #999;
				}
			}
		}
	}

	.span{
		height: auto;
		padding-top: 24rpx;
		.text_span{
			font-size: 30rpx;
			color: #666;
			padding: 0 25rpx;
			margin-bottom: 20rpx;
		}
		.image{
			width: 189rpx;height: 189rpx;
			margin-right: 15rpx;
		}
	}
	
}
.type{
	width: 706rpx;
	height: auto;
	border-radius: 10rpx;
	margin: 10rpx auto;
	padding: 30rpx 0 24rpx 24rpx;
	text{
		font-size: 30rpx;font-weight: bold;color: #2F2F2F;
	}
	.type_list{
		margin-top: 41rpx;
		view{
			width: 121rpx;
			height: 60rpx;
			background: #F2F2F2;
			border-radius: 10rpx;
			font-size: 28rpx;
			color: #999999;
			margin-right: 16rpx;
		}
		.item{
			color: #fff;
			background: #1CD699;
		}
	}
}
.foot{
	width: 706rpx;
	height: auto;
	background: #FFFFFF;
	border-radius: 20rpx;
	margin:  10rpx auto;
	margin-bottom: 170rpx;
	.ddxx{
		height: 90rpx;
		font-size: 30rpx;
		color: #333333;
		font-weight: bold;
		padding-left: 28rpx;
		padding-top: 20rpx;
	}
	.span_div{
		padding: 0 28rpx;
		margin-top: 29rpx;
		.left,.right{
			width: 120rpx;
			font-size: 30rpx;
			color: #666;
			line-height: 70rpx;
		}
		.right{
			width: 360rpx;
			text-align: right;
		}
	}
}
.bottom{
	// width: 100%;
	min-height: 107rpx;
	padding: 27rpx 30rpx 10rpx 0;
	position: fixed;
	bottom: 0;
	left: 0;
	white-space: nowrap;
	.button{
		width: 210rpx;
		height: 70rpx;
		margin-left: 12rpx;
		border-radius: 70rpx;
		font-size: 30rpx;
		line-height: 70rpx;
		text-align: center;
		color: #999999;
		border: 2px solid #B8B8B8;
	}
	.button1{
		background: #1CD699;
		color: #fff;
		border: none;
	}
	.button2{
		background:#FF2E2E ;
		color: #fff;
		border: none;
	}
}
.solid{
	width: 690rpx;
	margin: 0 8rpx;
}
.div{
	.foot{
		width: 706rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin:  10rpx auto;
		.ddxx{
			height: 90rpx;
			font-size: 30rpx;
			color: #333333;
			font-weight: bold;
			padding-left: 28rpx;
			padding-top: 20rpx;
		}
		.span_div{
			padding: 0 28rpx;
			margin-top: 29rpx;
			.left,.right{
				width: 120rpx;
				font-size: 30rpx;
				color: #666;
				line-height: 70rpx;
			}
			.right{
				width: 360rpx;
				text-align: right;
			}
		}
	}
	.foot2{
		margin-bottom: 170rpx;
	}
}
.ercode{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgba(0, 0, 0, .5);
	.code_div{
		width: 342rpx;
		height: 342rpx;
		overflow: hidden;
		border-radius: 20rpx;
		position: relative;
		.image{
			// width: 100%;height: 100%;
			// ay-Qrcode{
			// 	position: relative;
			// 	// z-index: 1;
			// }
		}
		.text{
			width: 100%;
			height: 42rpx;
			font-size: 30rpx;
			font-weight: 500;
			text-align: center;
			color: #fff;
			position: absolute;
			left: 0;
			top: 384rpx;
			
		}
		.cuIcon-roundclose{
			position: absolute;
			top: 510rpx;
			font-size: 60rpx;
			color: #fff;
		}
	}
}
</style>
